<template>
  <div>
    <!-- <div @click="yu">111</div> -->
    <x-header
      v-if="iswxXcx != 'wxBank'"
      :left-options="{ backText: '', preventGoBack: true }"
      :title="title"
      @on-click-back="headerBackFun"
    ></x-header>
    <div class="scroll-view">
      <!-- if(rdsuserinfo.DDLN_FLAG && rdsuserinfo.TLMT_FLAG){  //2、有授信额度，未到期：在产品宣传页，提示“您当前已拥有XXX产品有效授信额度，请在手机银行发起用款申请”； -->
      <div
        class="loan-box"
        v-if="rdsuserinfo.DDLN_FLAG && rdsuserinfo.TLMT_FLAG"
      >
        <p class="line">您当前已拥有{{ proinfo.title }}产品有效授信额度，</p>
        <p class="line">请在手机银行发起用款申请。</p>
        <p class="line">贵银小微兴农 | 助力乡村振兴</p>
      </div>
      <!-- if(rdsuserinfo.TLMT_FLAG && !rdsuserinfo.DDLN_FLAG){  //3、有授信额度，已到期：在产品宣传页，提示“非常抱歉，您暂时无法申请该产品，请建议您的专属客户经理了解详情” -->
      <div
        class="loan-box"
        v-if="rdsuserinfo.TLMT_FLAG && !rdsuserinfo.DDLN_FLAG"
      >
        <p class="line">非常抱歉，您暂时无法申请该产品，</p>
        <p class="line">请建议向您的专属客户经理了解详情。</p>
        <p class="line">贵银小微兴农 | 助力乡村振兴</p>
      </div>
      <!-- <div class="loan-box">
        <p class="line">您还不是我行“{{proinfo.title}}”的准入客户，</p>
        <p class="line">暂不能办理此项业务。</p>
        <p class="line">贵银小微兴农 | 助力乡村振兴</p>
        <button>我要贷款</button>
      </div> -->
      <div class="loan-box">
        <!-- <div class="pro-title">产品特点</div> -->
        <div class="pro-main">
          <div v-if="iswxXcx == 'appBank'" class="pro-li" @click="drawings()">
            <div class="img">
              <van-icon name="balance-o" size="30" />
            </div>
            <p>提款</p>
          </div>
          <!-- if(!rdsuserinfo.TLMT_FLAG){ //1、无授信额度：在产品宣传页显示“立即申请”按钮； -->
          <div
            class="pro-li"
            v-if="!rdsuserinfo.TLMT_FLAG"
            @click="setProClick"
          >
            <div class="img">
              <van-icon name="balance-o" size="30" />
            </div>
            <p>立即申请</p>
          </div>
          <div
            class="pro-li"
            @click="applyRefinance"
          >
            <div class="img">
              <van-icon name="balance-o" size="30" />
            </div>
            <p>申请续贷</p>
          </div>
          <!-- <div v-if="iswxXcx == 'wxBank'" class="pro-li" @click="face">
            <div class="img"><van-icon name="wap-home-o" size="30" /></div>
            <p>跳转微信人脸</p>
          </div> -->
          <!-- <div class="pro-li">
            <router-link to="/componentsDemo">
              <div class="img"><van-icon name="wap-home-o" size="30" /></div>
              <p>组件Demo</p>
            </router-link>
          </div> -->
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="loan-box">
        <div class="pro-title">申请条件</div>
        <ul>
          <li v-if="proinfo.code == 'XD5190100002'">年龄在20周岁至65周岁</li>
          <li v-if="proinfo.code != 'XD5190100002'">年龄在20周岁至60周岁</li>
          <li v-if="proinfo.code == 'XD5190100002'">从事涉农生产或经营</li>
          <li v-if="proinfo.code != 'XD5190100002'">从事生产经营</li>
          <li>无不良信用记录和行为记录</li>
        </ul>
      </div>
    </div>
    <pro-route
      v-if="show"
      :show="show"
      :proId="proId"
      :proCode="proCode"
      :appId="appId"
      :rdsuserinfoData="rdsuserinfo"
      @handleChange="handleChange"
    >
    </pro-route>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon,Dialog } from "vant";

import proRoute from "./component/proRoute.vue";
import wx from "weixin-js-sdk";
export default {
  name: "mustLoan",
  components: {
    proRoute,
    [Icon.name]: Icon,
  },
  data() {
    return {
      loanList: [
        {
          id: "1",
          title: "经营贷",
          list: [
            {
              id: "438540818158190593",
              title: "兴农贷",
              code: "XD5190100002",
              content: "新农村建设 助农贷款",
              icon: "after-sale",
              background: "#4CD2D5",
            },
            {
              id: "438544865925005313",
              title: "经营快贷",
              code: "XD5110100002",
              content: "你结算 我贷款 免抵押 免担保",
              icon: "after-sale",
              number: "20000",
              background: "#4CD2D5",
            },
          ],
        },
      ],
      title: "",
      iswxXcx: "", //是否是微信小程序   如果是不像是标题栏
      rdsuserinfo: {}, //用户信息  // TLMT_FLAG  是否有额度   DDLN_FLAG  是否到期
      proinfo: {},
      show: false,
      proId: "",
      proCode: "",
      appId: "",
    };
  },
  mounted() {

    this.iswxXcx = process.env.Equipment;
    if (this.$route.query.appId) {
      this.appId = this.$route.query.appId;
    }
    if (this.$route.query.name) {
      this.title = this.$route.query.name;
      this.proinfo.title = this.$route.query.name;
      for (var i = 0; i < this.loanList.length; i++) {
        for (var j = 0; j < this.loanList[i].list.length; j++) {
          if (this.loanList[i].list[j].title == this.proinfo.title) {
            this.proinfo.id = this.loanList[i].list[j].id;
            this.proinfo.code = this.loanList[i].list[j].code;
          }
        }
      }
      localStorage.removeItem("rdsuserinfo");
      localStorage.removeItem("rds-proinfo");
    } else {
      this.rdsuserinfo = JSON.parse(localStorage.getItem("rdsuserinfo"));
      this.proinfo = JSON.parse(localStorage.getItem("rds-proinfo"));
      this.title = this.proinfo.title;
    }
    window.localStorage.setItem("proinfoName",this.title)
  },
  methods: {

    applyRefinance () {
      this.$router.push("/refinance/apply")
    },
    setProClick() {

      let that = this;
      // this.$router.push("/bpm/start?defId="+item.id);
      if (process.env.Equipment == "wxBank") {
        let channelInfo = localStorage.getItem("CHANNEL_INFO");
        if (channelInfo) {
          channelInfo = JSON.parse(channelInfo);
          if (channelInfo.appId) {
            this.appId = channelInfo.appId;
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: "暂无操作权限",
            });
            return;
          }
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: "暂无操作权限",
          });
          return;
        }


// window.scrollTo(0, 0)
        Dialog.alert({
          message: `<p class='hint-text'>(一) 您正在申请贵州银行贷款产品。请您确认为本人操作，谨防诈骗。<b>凡是自称公检法或其他陌生电话及网站要求您开通手机银行、网银、办理贷款、回款、转账到安全账户、接受调查或索要个人及银行卡信息的均是诈骗。</b></p><p class='hint-text'>(二) 我行${this.title}为线上<b>自营贷款产品我行未与任何公司或个人合作，委托收取中介费、介绍费、手续费等各种费用。除贷款利息以外，贷款无其他任何形式的附加费用，请放心使用。</b></p><p class='hint-text'>(三) 贷款资金仅限于借款合同中约定的用途使用，<b>不得以任何形式流入证券市场、期货市场和用于股本权益性投资、房地产项目开发，不用于购房、购买理财产品、投资账户、债券，不用于借贷、套利，不用于洗钱等国家法律法规明确规定不得经营的项目或挪作他用。</b>我行将在贷后对您的资金用途进行核查，请您妥善保管贷款用途相关证明资料。</p>`,
          title: "业务提示",
          // showCancelButton: false,
          // position: 'bottom',
          confirmButtonColor:'#f00',
          // confirm() {

          // },
        }).then(() => {
        // on close

            that.show = true;
            that.proId = that.proinfo.id;
            that.proCode = that.proinfo.code;
            // that.$vux.confirm.hide();
});
      } else if (process.env.Equipment == "appBank") {
        let params = {
          audience: "app",
        };
        this.$bridge.nativeFunc({ method: "getRequestAesKey" }, (signData) => {
          // console.log("JSbridge 返回的数据 ==>", signData);
          let obj = JSON.parse(signData);
          // console.log("JSbridge 返回的数据(JSON) ==>", obj);
          Dialog.alert({
            message: `<p class='hint-text'>(一) 您正在申请贵州银行贷款产品。请您确认为本人操作，谨防诈骗。<b>凡是自称公检法或其他陌生电话及网站要求您开通手机银行、网银、办理贷款、回款、转账到安全账户、接受调查或索要个人及银行卡信息的均是诈骗。</b></p><p class='hint-text'>(二) 我行${this.title}为线上<b>自营贷款产品我行未与任何公司或个人合作，委托收取中介费、介绍费、手续费等各种费用。除贷款利息以外，贷款无其他任何形式的附加费用，请放心使用。</b></p><p class='hint-text'>(三) 贷款资金仅限于借款合同中约定的用途使用，<b>不得以任何形式流入证券市场、期货市场和用于股本权益性投资、房地产项目开发，不用于购房、购买理财产品、投资账户、债券，不用于借贷、套利，不用于洗钱等国家法律法规明确规定不得经营的项目或挪作他用。</b>我行将在贷后对您的资金用途进行核查，请您妥善保管贷款用途相关证明资料。</p>`,
            title: "业务提示",
            confirmButtonColor:'#f00',
            // showCancelButton: false,
            // onConfirm() {
            //   that.$vux.confirm.hide();
            //   params.requestParam = obj.request;
            //   params.aesKey = obj.aeskey;
            //   // console.log("请求的params ==> ", params);
            //   if (obj.request && obj.aeskey) {
            //     try {
            //       that.baseService
            //         .post(that.__ctx + "/CIPInterface/CIP2301025", params)
            //         .then((res) => {
            //           if (
            //             res.isOk &&
            //             res.data.inJson &&
            //             res.data.inJson.UserUniqueId
            //           ) {
            //             that.appId = res.data.inJson.UserUniqueId;
            //             that.show = true;
            //             that.proId = that.proinfo.id;
            //             that.proCode = that.proinfo.code;
            //           } else {
            //             that.$vux.toast.show({
            //               type: "warn",
            //               text: "获取登录信息失败，请重新进入！",
            //             });
            //             return;
            //           }
            //         })
            //         .catch((err) => {
            //           that.$vux.toast.show({
            //             type: "warn",
            //             text: "暂无操作权限",
            //           });
            //           return;
            //         });
            //     } catch (e) {
            //       console.warn(e);
            //     }
            //   } else {
            //     that.$vux.toast.show({
            //       type: "warn",
            //       text: "获取登录信息失败，请重新进入！",
            //     });
            //     // this.$vux.confirm.show({
            //     //   title: "提示信息",
            //     //   content: "获取登录信息失败，请重新进入！",
            //     //   onHide() {
            //     //     this.$bridge.nativeFunc({ method: "quit", nextStage: "" });
            //     //   },
            //     // });
            //     return;
            //   }
            // },
          }).then(() => {
        // on close
              // that.$vux.confirm.hide();
              params.requestParam = obj.request;
              params.aesKey = obj.aeskey;
              // console.log("请求的params ==> ", params);
              if (obj.request && obj.aeskey) {
                try {
                  that.baseService
                    .post(that.__ctx + "/CIPInterface/CIP2301025", params)
                    .then((res) => {
                      if (
                        res.isOk &&
                        res.data.inJson &&
                        res.data.inJson.UserUniqueId
                      ) {
                        that.appId = res.data.inJson.UserUniqueId;
                        that.show = true;
                        that.proId = that.proinfo.id;
                        that.proCode = that.proinfo.code;
                      } else {
                        that.$vux.toast.show({
                          type: "warn",
                          text: "获取登录信息失败，请重新进入！",
                        });
                        return;
                      }
                    })
                    .catch((err) => {
                      that.$vux.toast.show({
                        type: "warn",
                        text: "暂无操作权限",
                      });
                      return;
                    });
                } catch (e) {
                  //TODO handle the exception
                  console.warn(e);
                }
              } else {
                that.$vux.toast.show({
                  type: "warn",
                  text: "获取登录信息失败，请重新进入！",
                });
                // this.$vux.confirm.show({
                //   title: "提示信息",
                //   content: "获取登录信息失败，请重新进入！",
                //   onHide() {
                //     this.$bridge.nativeFunc({ method: "quit", nextStage: "" });
                //   },
                // });
                return;
              }


});
        });
      } else {
        this.show = true;
        this.proId = this.proinfo.id;
        this.proCode = this.proinfo.code;
      }
    },
    handleChange(e) {
      this.show = false;
    },
    loanClick() {
      this.$vux.loading.show({
        text: "加载中...",
      });
      // 点击贷款按钮调用接口/bpm/instance/doAction
      let defer = this.baseService.post(
        this.__ctx + "/bpm/instance/doActionForCallActivity",
        {
          defId: this.proinfo.id, //兴农贷默认
          data: {
            incomingBusinessObj: {
              DEVICE_INF: this.iswxXcx, //设备信息
              TWO_DIME_INF: "", //二维码信息
              PRODUCT_INF: this.proinfo.title, //基础产品信息
              // CIF_PSL_BASE: {
              //   CUST_LGL_NAM: this.rdsuserinfo.name, //姓名
              //   NUM_OF_IDV_ID_DOC: this.rdsuserinfo.idcardNo, //身份证号
              // },
              WF_LOAN_APPLICATION: {
                PROD_NAM: this.proinfo.title,
                PROD_COD: this.proinfo.code,
              },
            },
            suppBusinessObj: {},
            dueDiligenceBusinessObj: {},
          },
          action: "start", //默认
          opinion: "启动", //默认
        }
      );
      defer.then((data) => {
        this.$vux.loading.hide();
        if (data.isOk) {
          // 返回值包含taskId，接口发起成功后，默认跳转/bpm/complateTask页面，后拼接taskId
          this.$router.push("/bpm/complateTask?taskId=" + data.data.taskId);
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg,
          });
        }
      });
    },

    drawings() {
      let params = {
        method: "WdProducInfo",
        title: this.proinfo.title,
        prodCode: this.proinfo.code,
        repayList: [
          {
            text: "等额本息",
            value: "01",
          },
          {
            text: "等额本金",
            value: "02",
          },
          {
            text: "定期结息，到期还本",
            value: "03",
          },
          {
            text: "到期一次还本付息(利随本清)",
            value: "04",
          },
          {
            text: "定期结息，按还款计划还本",
            value: "09",
          },
        ],
        repayCycle: [
          { text: "按月", value: "0" },
          {
            text: "按季",
            value: "1",
          },
          {
            text: "按半年",
            value: "2",
          },
          {
            text: "按年",
            value: "3",
          },
        ],
        lendDate: [],
        pdfTypeList: [
          {
            text: "贵州银行农户类贷款业务借款合同(网络版)",
            value: "0",
          },
          {
            text: "农户类贷款资金用途承诺书",
            value: "1",
          },
        ],
        loanGuaranteList: [
          {
            text: "信用",
            value: "1",
          },
          {
            text: "保证",
            value: "2",
          },
          {
            text: "抵押",
            value: "3",
          },
          {
            text: "质押",
            value: "4",
          },
        ],
        lendLoanType: [],
      };
      let xnLendDate = [
        { name: "3个月", value: "3" },
        {
          name: "6个月",
          value: "6",
        },
        {
          name: "9个月",
          value: "9",
        },
        {
          name: "12个月",
          value: "12",
        },
        {
          name: "24个月",
          value: "24",
        },
        {
          name: "36个月",
          value: "36",
        },
      ];
      let kdLendDate = [
        {
          name: "3个月",
          value: "3",
        },
        {
          name: "6个月",
          value: "6",
        },
        {
          name: "9个月",
          value: "9",
        },
        {
          name: "12个月",
          value: "12",
        },
      ];
      if (this.proinfo.code == "XD5110100002") {
        params.lendDate = kdLendDate;
        params.lendLoanType = [
          // { text: "购商业用房", value: "102" },
          // { text: "购商业用车", value: "104" },
          {
            text: "生产经营",
            value: "109",
          },
          // { text: "归还原贷款(借新还旧、无还本续贷)", value: "111" },
          // { text: "其他个人贷款用途", value: "199" },
          // { text: "农业生产", value: "771" },
        ];
      } else {
        params.lendDate = xnLendDate;
        params.lendLoanType = [
          // { text: "购商业用房", value: "102" },
          // { text: "购商业用车", value: "104" },
          {
            text: "生产经营",
            value: "109",
          },
          // { text: "归还原贷款(借新还旧、无还本续贷)", value: "111" },
          // { text: "其他个人贷款用途", value: "199" },
          {
            text: "农业生产",
            value: "771",
          },
        ];
      }
      // let msg = `<p class='hint-text'>(一) 您正在申请贵州银行贷款产品。请您确认为本人操作，谨防诈骗。<b>凡是自称公检法或其他陌生电话及网站要求您开通手机银行、网银、办理贷款、回款、转账到安全账户、接受调查或索要个人及银行卡信息的均是诈骗。</b></p><p class='hint-text'>(二) 我行${this.title}为线上<b>自营贷款产品我行未与任何公司或个人合作，委托收取中介费、介绍费、手续费等各种费用。除贷款利息以外，贷款无其他任何形式的附加费用，请放心使用。</b></p><p class='hint-text'>(三) 贷款资金仅限于借款合同中约定的用途使用，<b>不得以任何形式流入证券市场、期货市场和用于股本权益性投资、房地产项目开发，不用于购房、购买理财产品、投资账户、债券，不用于借贷、套利，不用于洗钱等国家法律法规明确规定不得经营的项目或挪作他用。</b>我行将在贷后对您的资金用途进行核查，请您妥善保管贷款用途相关证明资料。</p>`;
      let that = this
     Dialog.alert({
        message: `<p class='hint-text'>(一) 您正在申请贵州银行贷款产品。请您确认为本人操作，谨防诈骗。<b>凡是自称公检法或其他陌生电话及网站要求您开通手机银行、网银、办理贷款、回款、转账到安全账户、接受调查或索要个人及银行卡信息的均是诈骗。</b></p><p class='hint-text'>(二) 我行${this.title}为线上<b>自营贷款产品我行未与任何公司或个人合作，委托收取中介费、介绍费、手续费等各种费用。除贷款利息以外，贷款无其他任何形式的附加费用，请放心使用。</b></p><p class='hint-text'>(三) 贷款资金仅限于借款合同中约定的用途使用，<b>不得以任何形式流入证券市场、期货市场和用于股本权益性投资、房地产项目开发，不用于购房、购买理财产品、投资账户、债券，不用于借贷、套利，不用于洗钱等国家法律法规明确规定不得经营的项目或挪作他用。</b>我行将在贷后对您的资金用途进行核查，请您妥善保管贷款用途相关证明资料。</p>`,
        title: "业务提示",
        confirmButtonColor:'#f00',
        // showCancelButton: false,
      }).then(() => {
        // on close
          that.$bridge.nativeFunc(params, (response) => {
            if (response) {
              that.$vux.alert.show({
                title: "温馨提示",
                content: response,
              });
            }
          });
            // that.$vux.confirm.hide();
});
      // this.$bridge.nativeFunc(params, (response) => {
      //   if (response) {
      //     this.$vux.alert.show({
      //       title: "温馨提示",
      //       content: response,
      //     });
      //   }
      // });
    },
    headerBackFun() {
      if (this.iswxXcx == "appBank") {
        let params = {
          method: "quit",
        };
        this.$bridge.nativeFunc(params);
      } else {
        this.$router.replace({
          path: "/bpm/mustLoan",
          query: {},
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.vux-header {
  background-color: #f4f4f4;

  /deep/.vux-header-left .left-arrow::before {
    border: 2px solid #1d2129 !important;
    border-width: 2px 0 0 2px !important;
  }

  /deep/.vux-header-title {
    color: #1d2129 !important;
  }

  .vux-header-right a {
    color: #1d2129;
  }
}

.scroll-view {
  top: 46px;
  // background: url("../../assets/loan-bg.jpeg");
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 7em;

  .loan-box {
    margin: 10px 3%;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 12px;
    padding: 1em 1.3em 0.5em;
    box-shadow: 0px 0px 7px #dedede;
    font-size: 1.1em;

    button {
      width: 90%;
      margin: 1em 5%;
      font-size: 1.3em;
      color: #ffffff;
      background-color: #9e9e9e;
      border-radius: 3em;
      border: 0;
      padding: 0.5em 0;
    }

    .line {
      text-align: center;
    }

    p {
      font-size: 1.3em;
      line-height: 2em;
    }

    .pro-title {
      padding: 5px 0;
      font-size: 1.7em;
      font-weight: bold;
    }

    .pro-main {
      min-height: 6em;

      .pro-li {
        width: 25%;
        float: left;
        text-align: center;

        p {
          font-size: 1em;
          color: #1d2129;
        }

        .img {
          border-radius: 50%;
          min-width: 3.5em;
          width: 3.5em;
          height: 3.5em;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #4d9997;
          background: #eef8f9;
          margin: 1em auto;
        }
      }
    }

    ul {
      margin-left: 1.3em;

      li {
        font-size: 1.3em;
        list-style: disc !important;
        line-height: 2em;
      }
    }
  }

}
</style>
